const api = require('../../../../wxapi/config.js')
const util = require("../../../../utils/util.js")
const F2 = require('../../../../component/ui/f2-canvas/lib/f2')
Page({
	/**
 * 用户点击右上角分享
 */
	onShareAppMessage: function () {
		return {
			title: '影视行业大数据',
			path: '/pages/index/RankingList/filmpaipian/filmpaipian'
		}
	},
	data: {
		color: ['#1890FF', '#2FC25B', '#FACC14', '#223273', '#F04864', '#8543E0', '#13C2C2', '#3436C7', '#F04864'],
		radarImg: '',
		radarImgTemp: '',
		activeName: [],
		activeNamesClass: [],
		cityActive: '全国',	
		scene: '场次',
		scene2: '场次',
		totaltop: 0,
		showScene: false,
		showScene2: false,
		showDatetime: false,
		actionsScene: [
			{ name: '场次' },
			{ name: '座位' }
		],
		minDate: new Date(2014, 12, 1).getTime(),
		maxDate: new Date().getTime(),
		currentDate: new Date().getTime(),
		currentDateStr: util.formatDate(new Date()),
		types: 0,
		dapanPieOpts: {
			lazyLoad: true
		},
		selectedDapanitem: {
			name: '',
			total: ''
		},
		dapanListData: [],
		cityListData: [],
		xiaopanList: [],
		isloading: false,
		isdapanListloading: false,
		isCityListloading: false,
		skeleton: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
	},
	onLoad: function (options) {

	},
	onShow: function () {
		this.setData({
			maxDate: this.getMaxDate(30)
		})
		this.setData({
			cityActive: this.data.cityActive
		})
		if (this.data.types === 0) {
			this.getThemeChart()
		} else {
			if (this.data.cityActive === '全国') {
				this.getCityList()
			} else {
				this.getxiaopanList()
			}
		}
	},
	// 城市折叠面板
	onChangecollapse(event) {
		this.setData({
			activeNames: event.detail
			// activeNamesClass: data
		});
	},
	// 切换大盘/城市/院线
	onChangeNav(event) {
		this.setData({
			types: event.detail.index
		})
		if (event.detail.index === 0) {
			this.getThemeChart()
		} else if (event.detail.index === 1) {
			if (this.data.cityActive === '全国') {
				this.getCityList()
			} else {
				this.getxiaopanList()
			}
		}
	},
	// 选择城市
	changeCity() {
		setTimeout(() => {
			this.setData({
				dapanListData: [],
				cityListData: []
			})
		}, 50)
		wx.navigateTo({
			url: '/component/city-list/index',
		})
	},
	// 显示选择场次座位组件
	showSceneOpt() {
		this.setData({
			radarImg: this.data.radarImgTemp,
			showScene: true
		})
	},
	// 取消隐藏选择场次座位组件
	hideSceneOpt() {
		this.getThemeChart()
		this.setData({
			radarImg: '',
			showScene: false
		})
	},
	// 显示选择场次座位组件
	showSceneOpt2() {
		this.setData({
			showScene2: true
		})
	},
	// 取消隐藏选择场次座位组件
	hideSceneOpt2() {
		this.setData({
			showScene2: false
		})
	},
	// 显示选择时间组件
	showDatetimeOpt() {
		this.setData({
			radarImg: this.data.radarImgTemp,
			showDatetime: true
		})
	},
	// 取消隐藏选择时间组件
	hideDatetimeOpt() {
		this.getThemeChart()
		this.setData({
			radarImg: '',
			showDatetime: false
		})
	},
	// 选择场次
	changeScene(event) {
		this.setData({
			radarImg: '',
			scene: event.detail.name,
			showScene: false
		})
		this.getThemeChart()
	},
	changeScene2(event) {
		this.setData({
			scene2: event.detail.name,
			showScene2: false
		})
		this.getCityList()
	},
	// 获取最大日期
	getMaxDate(num) {
		var maxDates = new Date().getTime()
		maxDates += num * 24 * 60 * 60 * 1000
		return maxDates
	},
	// 选择日期
	changeDate(event) {
		const date = new Date(event.detail)
		this.setData({
			radarImg: '',
			showDatetime: false,
			currentDate: event.detail,
			currentDateStr: util.formatDate(date)
		})
		if (this.data.types === 0) {
			this.getThemeChart()
		} else if (this.data.types === 1) {
			if (this.data.cityActive === '全国') {
				this.getCityList()
			} else {
				this.getxiaopanList()
			}
		}
	},
	// 获取大盘chart图数据
	getThemeChart() {
		this.setData({
			isdapanListloading: true
		})
		api.getScheduleList({
			rq: this.data.currentDateStr,
			city: this.data.cityActive,
			tag: this.data.scene === '场次' ? 0 : 1
		}).then(res => {
			if (res.data.length !== 0) {
				var data = []
				for (let i in res.data) {
					data.push({
						a: '1',
						name: res.data[i].mc,
						total: parseInt(res.data[i].total),
						rate: res.data[i].rate,
						pf: res.data[i].pf
					})
					this.data.totaltop += parseInt(res.data[i].total) 
				}
				this.setData({
					totaltop: this.data.totaltop,
					isdapanListloading: false,
					selectedDapanitem: {
						name: data[0].name,
						rate: data[0].rate
					},
					dapanListData: data
				})
				this.pieSelectChart('dapanPie', data)
			} else {
				this.setData({
					dapanListData: [],
					isdapanListloading: false,
					selectedDapanitem: {},
					radarImg: '',
					radarImgTemp: '',
					totaltop: 0
				})
			}
		})
	},
	//环状图
	pieSelectChart(id, data) {
		this.chartComponent = this.selectComponent('#' + id)
		this.chartComponent.init((canvas, width, height) => {
			// 设置图例项的内容
			var chart = new F2.Chart({
				el: canvas,
				width,
				height
			});
			chart.source(data, {
				percent: {
					formatter: function formatter(val) {
						return ((val * 10) * 10).toFixed(2) + '%'
					}
				}
			});
			chart.legend(false);
			chart.tooltip(false)
			chart.coord('polar', {
				transposed: true,
				radius: 1,
				innerRadius: 0.75
			});
			chart.axis(false)
			chart
				.interval()
				.position('a*total')
				.color('name', this.data.color)
				.adjust('stack')
				.style({
					lineWidth: 1,
					stroke: '#fff',
					lineJoin: 'round',
					lineCap: 'round'
				});
			chart.interaction('pie-select', {
				cancelable: false, // 不允许取消选中
				animate: {
					duration: 300,
					easing: 'backOut'
				},
				defaultSelected: {
					name: data[0].name,
					total: data[0].rate
				},
				onEnd: (ev) => {
					const { shape, data, shapeInfo, selected } = ev;
					if (shape) {
						if (selected) {
							this.setData({
								selectedDapanitem: {
									name: data.name,
									rate: data.rate
								}
							})
						}
					}
				}
			});
			chart.render()
			this.chartComponent.canvasToTempFilePath({
				success: res => {
					this.setData({
						radarImgTemp: res.tempFilePath
					})
				}, fail: res => {
					console.log(res)
				},
			})
			return chart
		})
	},
	getxiaopanList () {
		this.setData({
			isloading: true
		})
		api.getScheduleList({
			rq: this.data.currentDateStr,
			city: this.data.cityActive,
			tag: this.data.scene2 === '场次' ? 0 : 1
		}).then(res => {
			if (res.data.legend !== 0) {
				this.setData({
					xiaopanList: res.data,
					isloading: false
				})
			} else {
				this.setData({
					xiaopanList: [],
					isloading: false
				})
			}
		})
	},
	getCityList() {
		this.setData({
			isCityListloading: true
		})
		api.getScheduleCityList({
			rq: this.data.currentDateStr,
			city: this.data.cityActive,
			tag: this.data.scene2 === '场次' ? 0 : 1
		}).then(res => {
			if (res.data.length !== 0) {
				this.data.cityListData = res.data
				this.setData({
					cityListData: this.data.cityListData,
					isCityListloading: false
				})
			} else {
				this.setData({
					cityListData: [],
					isCityListloading: false
				})
			}
		})
	},
	onClickCollapseItem(e){
		var name = e.currentTarget.dataset.name
		var value = e.currentTarget.dataset.value
		var index = this.data.activeNames.indexOf(e.currentTarget.dataset.name)
		if (index === -1 ) {
			this.data.activeNamesClass[name] = false 
		} else {
			this.data.activeNamesClass[name] = true
			if (!this.data.cityListData[name].data) {
				api.getScheduleList({
					rq: this.data.currentDateStr,
					city: value,
					tag: this.data.scene2 === '场次' ? 0 : 1
				}).then(inres => {
					this.data.cityListData[name].data = inres.data
					this.setData({
						cityListData: this.data.cityListData
					})
				})
			}
		}
		this.setData({
			activeNamesClass: this.data.activeNamesClass
		})
	}
})